import React, { Component } from 'react'
import { Icon ,Picker} from 'react-vant';
import '../heatul.css'
export default class One extends Component {
    state = {
        columns: [
            {
                cityName: '是',
                cities: [
                    {
                        cityName: '1年',
                        cities: [{ cityName: '白酒' }, { cityName: '红酒' }],
                    },
                    {
                        cityName: '2年',
                        cities: [{ cityName: '白酒' }, { cityName: '红酒' }],
                    },
                ],
            },
            {
                cityName: '否',
                cities: [
                    {
                        cityName: '1年',
                        cities: [{ cityName: '白酒' }, { cityName: '红酒' }],
                    },
                    {
                        cityName: '2年',
                        cities: [{ cityName: '白酒' }, { cityName: '红酒' }],
                    },
                ],
            },
        ],
        columnsFieldNames: {
            text: 'cityName',
            children: 'cities',
        }
    }
    com = () => {
        this.setState({
            display:'block'
        })
    }
    back=()=>{
        this.props.history.go(-1)
    }
    render() {
        return (
            <div className="on">
                <div className="on_top">
                    <li onClick={()=>this.back()}>&ensp;<Icon name="arrow-left" /></li>
                    <li>健康档案</li>
                    <li>保存&emsp;</li>
                </div>
                <div className="on_main">
                    <div className="on_one">
                        <li>
                            <span>身份证号</span><input type="text" />
                        </li>
                        <li>
                            <span>身高</span>&emsp;&emsp;&ensp;<input type="text" />
                        </li>
                        <li>
                            <span>体重</span>&emsp;&emsp;&ensp;<input type="text" />
                        </li>
                        <li>
                            <span>BMI</span>&emsp;&emsp;&ensp;<input type="text" />
                        </li>
                        <li>
                            <span>腰围</span>&emsp;&emsp;&ensp;<input type="text" />
                        </li>
                    </div>
                    <div className="on_two">
                        <li>
                            <span>吸烟史</span>&emsp;<input type="text" />
                        </li>
                        <li>
                            <span>饮酒史</span><span id="arrow" onClick={() => this.com()} >请选择<Icon name="arrow" /></span>
                            <div className="on_three">
                                <Picker title="饮酒史" columnsFieldNames={this.state.columnsFieldNames} columns={this.state.columns} />
                            </div>
                        </li>
                    </div>
                </div>
            </div>
        )
    }
}
